<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>猜字谜游戏</title>
    <link rel="stylesheet" href="../lib/layer_css/layer.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/animate.min.css">
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/layer.js"></script>
    <script src="../js/rem.js"></script>
    <script src="../js/tool.js"></script>
    <script>
        document.documentElement.style.height = window.innerHeight + 'px';
    </script>
</head>

<body class="animated bounceInDown">
    <div class="game-ruler animated bounceInDown">
        <div class="game-panel">
            <div class="game-container">
                <div class="game-nav"><a href="#" class="close g_close" data-parent=".game-ruler"></a></div>
                <div id="rulerMsg" class="ruler-msg">
                    <h3>游戏规则</h3>
                    <p>这里是游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则</p>
                    <h3>活动时间</h3>
                    <p>这里是游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则</p>
                    <h3>游戏玩法</h3>
                    <p>这里是游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则</p>
                    <h3>参与方式</h3>
                    <p>这里是游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则游戏规则</p>
                </div>
            </div>
        </div>
    </div>
    <div class="pop-up-window animated bounceInDown">
        <div class="pop-panel">
            <div class="pop-container price-container  real-window ">
                <div class="pop-nav"><a href="#" class="close f_close" data-parent=".pop-up-window"></a></div>
                <div class="pop-msg">
                    <p class="pop-title">收件信息填写</p>
                    <form action="" id="addressForm">
                        <ul>
                            <li><label for="u_name">姓名：</label><input id="u_name" type="text" name="u_name" placeholder="请填写收件人姓名" value=""></li>
                            <li> <label for="u_pho">电话：</label><input id="u_pho" name="phone" type="text" placeholder="请填写收件人手机号" value=""></li>
                            <li><label for="u_addr"> 邮寄地址：</label><input id="u_addr" name="address" type="text" placeholder="请填写快递地址" value=""></li>
                        </ul>
                        <input id="inputOpen" type="text" hidden="" name="openid" value="1111">
                    </form>
                </div>
                <div class="pop-footer"><a href="#" id="postAddr"></a></div>
            </div>
            <div class="pop-container price-container common-window">
                <div class="pop-nav"><a href="#" class="close f_close" data-parent=".pop-up-window"></a></div>
                <div class="pop-msg">
                    <p class="pop-title">邀请好友扫描下方二维码</p>
                    <p class="pop-info">立即赢大奖</p>
                    <p class="wechat">
                        <img src="" alt="">
                    </p>
                </div>
                <div class="pop-footer"><a href="#"></a></div>
            </div>
            <div class="pop-container price-container flow-window ">
                <div class="pop-nav"><a href="#" class="close f_close" data-parent=".pop-up-window"></a></div>
                <div class="pop-msg">
                    <p class="pop-title"><b>领取号码为：</b><a href="javascript:void(0);">13277334751</a></p>
                    <p class="pop-info">流量将于活动结束后</p>
                    <p class="pop-info">10个工作日内到账并短信通知，请注意查收</p>
                </div>
                <div class="pop-footer"><a href="../index.html" id="flowBtn"></a></div>
            </div>
        </div>
    </div>
    <div id="game" class="game-price">
        <header class="clear"><a href="../index.html"></a></header>
        <div>
            <div class="price-title">
                <div class="price-title HYJinChangTiJ">我的奖品</div>
                <div><span id="price-intro" class="price-intro">领取说明</span></div>
            </div>
            <div class="price-container">
                <div class="price-img"><img src="" alt=""></div>
                <p class="price-name"><span id="prizeName">华为E5随身WIFI（WCDMA版）</span></p>
            </div>

        </div>
        <div class="game-chance">
            <div class="btn-group">
                <p><a href="#" id="getPrice">立即领取</a></p>
                <p><a href="#" id="invitFriend">邀请好友</a></p>
            </div>
        </div>
        <div class="ad">
            <span>广告</span>
            <div><a href="">10元2GB流量</a></div>
        </div>
    </div>
    <script>
        const rec_reward = {
            openid: '',
            invitFriend: "#invitFriend",
            getPrice: '#getPrice',
            addressForm: '#addressForm',
            postAddr: "#postAddr",
            price_intro: '#price-intro',
            game_ruler: '.game-ruler',
            pop_info: '.pop-info',
            receivePage: '../json/addrUrl.json',
            inputOpen: "#inputOpen",
            // receivePage: 'http://10.122.202.211:8080/woAH-wap/poem/receivePage.action',
            getPrize: '../json/getPrize.json',
            //getPrize: 'http://localhost:8080/woAH-wap/poem/getPrizeInfoByOpenId.action',
            u_name: "#u_name",
            u_addr: "#u_addr",
            u_pho: '#u_pho',
            all_window: {
                flow_window: ".flow-window",
                real_window: '.real-window',
                common_window: '.common-window',
            },
            pop_title: '.pop-title',
            pop_container: '.pop-container',
            f_close: '.f_close',
            g_close: '.g_close',
            pop_up_window: ".pop-up-window",
            priceType: '',
            prizeName: "#prizeName",
            init: function() {
                this.initPrize();
                //邀请好友
                this.invit();
                //关闭弹窗
                this.closePop(this.f_close);
                this.closePop(this.g_close);
                //领取规则
                this.rulerClick();
                this.priceGet();
            },
            initPrize: function() {
                var context = this;
                $.ajax({
                    type: "POST",
                    url: context.getPrize,
                    data: {
                        "openid": context.openid
                    },
                    success: function(response) {
                        response = response.data;
                        if ("0000" == response.respcode) {
                            context.priceType = response.prizeType;
                            context.price_name = response.prizeName;
                            $(context.prizeName).html(response.prizeName);
                            console.log(context.priceType);
                        }
                    },
                    error: function() {}

                })
            },
            invit: function() {
                var context = this;
                $(context.invitFriend).click(function(e) {
                    e.preventDefault();
                    context.showPop(context.invitData);
                })
            },
            //点击活动规则
            rulerClick: function() {
                var context = this;
                $(context.price_intro).click(function(e) {
                    e.preventDefault();
                    console.log('price_intro');
                    $(context.game_ruler).fadeIn(300);
                });
            },
            //根据奖品弹窗
            priceGet: function() {
                var context = this;
                $(context.getPrice).click(function(e) {
                    e.preventDefault();
                    $(context.pop_container).fadeOut(0)
                    console.log('getPrice', context.priceType);
                    //判断奖品类型
                    if ('1' == context.priceType) {
                        $(context.pop_up_window).fadeIn()
                        $(context.all_window.real_window).fadeIn(300);
                        context.sumbitFormInfo();
                    } else {
                        $(context.pop_up_window).fadeIn()
                        $(context.all_window.flow_window).fadeIn(300);
                    }
                })
            },
            //
            sumbitFormInfo: function() {
                var context = this;

                function testPhone() {
                    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                    if (!myreg.test($(context.u_pho).val())) {
                        layer_msg('请输入有效的手机号码！');
                        return false;
                    }
                    return true;
                }

                $(context.postAddr).click(function(e) {
                    e.preventDefault();
                    //添加openid
                    $(context.inputOpen).val('111111');
                    var formData = $(context.addressForm).serializeArray();
                    console.log(formData);
                    var data = testPhone() && $(context.u_name).val().trim() && $(context.u_addr).val().trim();
                    console.log(testPhone(), $(context.u_name).val().trim(), $(context.u_addr).val().trim());
                    if (data) {
                        $.ajax({
                            type: 'POST',
                            url: context.receivePage,
                            contentType: "application/json;charset=UTF-8",
                            data: JSON.stringify(arry2json(formData)),
                            success: function(response) {
                                response = response.data;
                                if ('0000' == response.respcode) {
                                    layer_msg("您的信息已提交，<br>请耐心等待奖品的到来吧");
                                }
                            },
                            error: function() {}
                        })
                    } else {
                        layer_msg('请将信息填写完全')
                    }
                })

            },
            showPop: function(data) {
                var context = this;
                $(context.pop_up_window).fadeIn()
                $(context.pop_container).fadeOut(0)
                $(context.all_window.common_window).fadeIn(300);
            },
            //绑定弹窗关闭按钮
            closePop: function(btn) {
                var context = this;
                var close_parent = $(btn).attr('data-parent')
                $(btn).click(function(e) {
                    console.log(close_parent);
                    e.preventDefault();
                    $(close_parent).fadeOut(300)
                })
            },
        }
        rec_reward.init();
    </script>
</body>

</html>
